【JavaScript】this - オブジェクト自身を記憶する変数

JavaScriptのthisについて解説します。

検証環境

JavaScript -

macOS

14.1

this

thisは“オブジェクト自身を記憶する変数”です。

JavaScriptが事前に用意した変数であり、オブジェクトの内部処理（メソッド等）のみで使用可能です。

主にオブジェクトの内部処理から自身のプロパティやメソッドにアクセスする場合に使用します。

基本構文

this

thisはオブジェクトのメソッド等の処理で記述します。

サンプル

sample.js

let person = {
    name: 'TANAKA',
    info: function() {
        ___ih_hl_start
        console.log(this);
        ___ih_hl_end
    }
};

person.info();

Console

Object
  info: ƒ ()
  name: "TANAKA"

４行目でthisを使用しています。

実行結果からオブジェクトが記憶されていることが確認できます。

this（プロパティ）

thisを使用し、プロパティにアクセスできます。

取得

thisを通してプロパティの値を取得します。

基本構文

this.プロパティ名

サンプル

sample.js

let person = {
    name: 'TANAKA',
    info: function() {
        ___ih_hl_start
        console.log("My name is " + this.name);
        ___ih_hl_end
    }
};

person.info();

Console

My name is TANAKA

４行目のthis.nameがthisを使用したプロパティ値の取得です。

実行結果から正常に値を取得できたことが確認できます。

記憶

thisを使用し、プロパティの追加や値の更新を行うことができます。

基本構文

this.プロパティ名 = 値

既に同じプロパティ名が存在する場合は値を更新し、存在しない場合はプロパティを追加します。

サンプル

sample.js

let person = {
    name: 'TANAKA',
    age: 24,
    info: function() {
        console.log("My name is " + this.name);
        console.log(this.age + " years old");
    },
    growup: function() {
        ___ih_hl_start
        this.age += 1;
        ___ih_hl_end
    }
};

person.growup();
person.info();

Console

My name is TANAKA
25 years old

growupメソッドの９行目がthisを使用したプロパティ値の更新です。

１３行目でgrowupメソッドを呼び出したことにより、ageプロパティの値が1加算されたことが実行結果から確認できます。

this（メソッド）

thisを使用し、メソッドにアクセスできます。

呼び出し

thisを通して、メソッドを呼び出します。

基本構文

this.メソッド名(実引数)

サンプル

sample.js

let person = {
    name: 'TANAKA',
    age: 24,
    info: function() {
        ___ih_hl_start
        this.greeting();
        ___ih_hl_end
        console.log("My name is " + this.name);
        console.log(this.age + " years old");
    },
    greeting: function() {
        console.log("Hello");
    }
};

person.info();

Console

Hello
My name is TANAKA
24 years old

５行目がthisを使用したメソッドの呼び出しです。

実行結果からgreetingメソッドが正常に呼び出せたことが確認できます。

定義

thisを通して、メソッドを定義（記憶）します。

基本構文

this.メソッド名 = function() {
    // 処理...
}

既に同じメソッド名が存在する場合は内容を更新し、存在しない場合はメソッドを追加します。

サンプル

sample.js

let person = {
    name: 'TANAKA',
    age: 24,
    info: function() {
        this.greeting();
        console.log("My name is " + this.name);
        console.log(this.age + " years old");
    },
    greeting: function() {
        console.log("Hello");
    },
    updateGreeting: function( grt ) {
        ___ih_hl_start
        this.greeting = grt;
        ___ih_hl_end
    }
};

person.updateGreeting(function() { console.log("Good Morning")});
person.info();

Console

Good Morning
My name is TANAKA
24 years old

１３行目がthisを使用したメソッドの定義（記憶）です。

updateGreetingメソッドはオブジェクト自身のgreetingメソッドを更新します。

実行結果からgreetingメソッドの処理が変更されたことが確認できます。

注意点

無名関数とアロー関数はthisが記憶するオブジェクトが異なります。

sample.js

let obj = {
    testA: function() {
        console.log(this);
    },
    testB: () => {
        console.log(this);
    }
}

obj.testA();
console.log(">>>>>>>>>>");
obj.testB();

Console

{testA: ƒ, testB: ƒ}
  testA: ƒ ()
  testB: () => {         console.log(this);     }
>>>>>>>>>>
Window {window: Window, self: Window, document: document, name: '', location: Location, …}

testAメソッドは無名関数、testBメソッドはアロー関数です。

各メソッドはconsole.log(this)でthisを出力していますが、実行結果から出力内容が異なることが分かります。

無名関数のthisはアクセスしたオブジェクト、アロー関数のthisはWindowオブジェクトを指しています。

WindowオブジェクトはブラウザでJavaScriptを実行した場合、全てのオブジェクトの親となるオブジェクトです。

このような違いがあることに注意し、ソースコードを作成しましょう。